<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main Program</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

  <style>
    /* CSS 样式 */
    #diagram img {
      width: 300px; /* 设置图片宽度 */
      border: 1px solid black; /* 设置图片边框 */
    }
  </style>
</head>
<body>
<h1>Main Program - Subprogram</h1>

<!-- 原理图展示区 -->
<div id="diagram">
  <img src="../static/img/swpu.png" alt="原理图">
</div>

<!-- 文字说明区域 -->
<div id="description">
  <p>在这里写文字说明...</p>
</div>

<!-- 源程序展示区域 -->
<pre id="source-code">
    <code>
      // 在这里插入你的源程序代码
    </code>
  </pre>

<!-- 输入输出框 -->
<div id="input-output">
  <label for="input">输入：</label>
  <input type="text" id="input" v-model="inputText">
  <br>
  <label for="output">输出：</label>
  <textarea id="output" rows="4" cols="50">{{ outputText }}</textarea>
  <br>
  <button @click="sendGetRequest">完成</button>
</div>

<script>
  new Vue({
    el: '#input-output',
    data: {
      inputText: '',
      outputText: ''
    },
    methods: {
      sendGetRequest() {
        // 发送 GET 请求
        // 这里可以使用你喜欢的方式发送 GET 请求，比如使用 Axios、fetch 等
        // 下面是一个示例使用 Axios 发送 GET 请求的代码
        axios.get('/main-program', {
          params: {
            input: this.inputText
          }
        })
                .then(response => {
                  // 请求成功后更新 outputText
                  this.outputText = response.data;
                  console.log(response);
                })
                .catch(error => {
                  // 请求失败时处理错误
                  console.error(error);
                });
      }
    }
  });
</script>

</body>
</html>